<template>
    <div class="main">
        <div class="nav-contain long">
            <my-nav class="nav" left="首页" mid="个人问卷" right="登出" @toHome='toHome' @toAbout='toPersonQuestion' @topChange='topChange'></my-nav>
        </div>
        <div class="content">
            <div class="t1">
                <label>用户名</label><label>{{username}}</label>
            </div>
            <div class="t2">
                <label style="margin-left:3rem;">新密码</label><input type="password" v-model="npwd" autocomplete="new-password" placeholder="点我输入新密码"/>
            </div>
            <button class="button" @click="changePassword">确认修改</button>
        </div>
    </div>
</template>
<script>
import cookie from 'cookie'
import MyNav from '../components/MyNav.vue';
    export default{
        name:'personData',
        components:{
            MyNav,
        },
        created(){
                var uid = cookie.parse(document.cookie).uid;
                var username=cookie.parse(document.cookie).username;
                var password=cookie.parse(document.cookie).password;
                this.uid=uid;
                this.username=username;
                this.password=password;
        },
        data:function(){
            return{
                npwd:'',
                uid:'',
                username:'',
                password:'',
            }
        },
        methods:{
            toHome:function(){
                this.$router.push('/home');
            },
            toPersonQuestion:function(){
                this.$router.push('/manage');
            },
            changePassword:function(){
                if(this.npwd.length==0){
                    this.$alert('新密码不能为空','提示',{confirmButtonText: '确定',})
                    return;
                }else if(this.npwd.length>0&&this.npwd.length<6){
                    this.$alert('新密码长度不能小于6位','提示',{confirmButtonText: '确定',})
                    return;
                }
                var uid = cookie.parse(document.cookie).uid;
                var username=cookie.parse(document.cookie).username;
                var password=cookie.parse(document.cookie).password;
                this.axios.post('/user/changePassword',{newPassword:this.npwd,password:password,uid:uid,username:username})
                .then(response=>{
                   if(response.data.code==200){
                       this.$message('修改密码成功');
                   }else{
                       this.$message(response.data.msg+' 修改密码失败');
                   }
                })
                .catch(error=>{
                    this.$message(error+' 修改密码失败!');
                        })
                    },
            topChange:function(){
            console.log('topchange');
            const top=document.querySelector('.nav-contain');
            if(top.className.indexOf('short')!==-1){
                top.classList.remove('short');
                top.classList.add('long');
            }else{
                top.classList.remove('long');
                top.classList.add('short');
            }
            },
        }
    }
</script>
<style scoped>
.main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
}
.content{
    background-image: url('../assets/survey.jpg');
    opacity: 0.8;
    background-size: cover;
    margin-top: 7rem;
    display: flex;
    width:80%;
    height:100%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 2rem;
    box-shadow: 0 0.2rem 0.4rem rgba(17, 3, 3, 0.4);
    z-index: 1;
}
.nav-contain{
  height:15vh;width:100vw;display:flex;justify-content:space-around;align-items:center;
  background-image:url('../assets/survey2.jpg') ;
  background-size: cover;
  opacity: 0.8;
}
input {
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 2px solid #dbdbdb;
  height: 40px;
  outline: none;
  font-size: 17px;
}
.nav{
    width:5rem;
    height: 0.2rem;
}
.t1,.t2{
    width:100%;
    height:10rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    margin-right: auto;
    opacity: 0.7;
}
.button{
  cursor:pointer;
  color:white;
  width:6rem;
  height:2.5rem;
  border:none;
  border-radius: 0.3rem;
  background:#7e57c2;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size:1rem;
  margin-bottom: 3rem;
  margin-top: 3rem;
}
.button:hover{
  background:#673ab7;
}
.short{
  height:5vh;
  transition: all 0.7s ease-in-out;
}
.long{
  height:15vh;
  transition: all 0.7s ease-in-out;
}
label{
    font-size: 1.5rem;
    font-weight: 600;
}
</style>
